import React, { useState } from 'react'
import { Cascader, Button, Space, Toast, Form, Input } from 'antd-mobile'
import { cityData, longOptions } from './city'
import "./pushAddress.scss";
import { LeftOutline } from 'antd-mobile-icons'
import { useNavigate } from 'react-router-dom'
import API from '../api/address'
import { store } from '../../store'

interface Icity {
    value: number;
    label: string;
    children: {
        value: number;
        label: string;
        children: {
            value: number;
            label: string;
        }
    }
}

export default function PushAddress() {
    const navigate = useNavigate()
    const {  token } = store.getState().userReducer.user
    const [city, setCity] = useState<any>(cityData.map((item: any) => {
        item.value = item.label
        return item
    }))

    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState<string[]>([])
    const [val, setVal] = useState<string>('省/市/区')
    const onFinish = (async (values: any) => {
        console.log(val.split('-').join(""), 'form')
        let res = await API['addressAdd']({ token, address_city: val.split('-').join(""), address_town: values.town, address_contacts: values.contacts, address_phone: values.phone })
        console.log(res, '添加地址')
        setTimeout(() => {
            Toast.show({
                content: '地址已添加',
                position: 'top'
            })
            navigate(-1)
        }, 1000)
    })
    return (
        <div className='pushaddress'>
            <div className='pushAddress_back'>
                <Button onClick={() => navigate(-1)}><LeftOutline /></Button>
                新增收货地址
            </div>
            <div className='pushAddress_main'>
                <div className='Cascader'>
                    <Cascader
                        options={city}
                        visible={visible}
                        onClose={() => {
                            setVisible(false)
                        }}
                        value={value}
                        onConfirm={setValue}
                        onSelect={(val, extend) => {
                            console.log('onSelect', val, extend.items)
                        }}
                    >
                        {items => {
                            if (items.every(item => item === null)) {
                                return '省/市/区'
                            } else {
                                setVal(items.map(item => item?.label ?? '未选择').join('-'))
                                return items.map(item => item?.label ?? '未选择').join('-')
                            }
                        }}
                    </Cascader>
                </div>
                <Form layout='horizontal' onFinish={onFinish} footer={
                    <Button block type='submit' color='primary' size='large'>
                        保存
                    </Button>
                }>
                    <Form.Item label='收货地址' name='username' onClick={() => {
                        setVisible(true)
                    }}>
                        {
                            val
                        }
                    </Form.Item>

                    <Form.Item label='门牌号' name='town'>
                        <Input placeholder='楼号/门牌号、如A座101室' clearable />
                    </Form.Item>
                    <Form.Item label='联系人' name='contacts'>
                        <Input placeholder='您的名字' clearable />
                    </Form.Item>
                    <Form.Item label='手机号' name='phone'>
                        <Input placeholder='配送员联系您的手机号' clearable />
                    </Form.Item>
                </Form>



            </div>

        </div>
    )
}
